<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1 {
			text-align: center;
		}
		
		#registrationForm {
			width: 300px;
			margin: 0px auto;
		}
		</style>
		
	</head>
	<body>
		<h1>用户注册</h1>
		  <form id="registrationForm">
		        <div>
		            <label for="username">用户名:</label>
		            <input type="text" id="username" required>
		            <span id="usernameError" class="error"></span>
		        </div>
		        <div>
		            <label for="password">密码:</label>
		            <input type="password" id="password" required>
		            <span id="passwordError" class="error"></span>
		        </div>
		        <div>
		            <label for="email">邮箱:</label>
		            <input type="email" id="email" required>
		            <span id="emailError" class="error"></span>
		        </div>
		        <div>
		            <label for="phone">电话号码:</label>
		            <input type="tel" id="phone" required>
		            <span id="phoneError" class="error"></span>
		        </div>
		        <div>
		            <label for="birthday">生日:</label>
		            <input type="text" id="birthday" required>
		            <span id="birthdayError" class="error"></span>
		        </div>
		      <button type="button" onclick="check()">登录</button>
		    </form>
		
		    <script type="text/javascript">
		    	
		  
		        function validateForm() {
		            const username = document.getElementById('username').value;
		            const password = document.getElementById('password').value;
		            const email = document.getElementById('email').value;
		            const phone = document.getElementById('phone').value;
		            const birthday = document.getElementById('birthday').value;
		            let isValid = true;
		
		            // 用户名验证
		            const usernameRegex = /^[A-Za-z][A-Za-z0-9]{5,19}$/;
		            if (!usernameRegex.test(username)) {
		                document.getElementById('usernameError').textContent = '用户名必须以英文开头，包含英文和数字，长度6-20';
		                isValid = false;
		            } else {
		                document.getElementById('usernameError').textContent = '';
		            }
		
		            // 密码验证
		            const passwordRegex = /^[\w]{6,20}$/;
		            if (!passwordRegex.test(password)) {
		                document.getElementById('passwordError').textContent = '密码必须为6-20位的英文、数字或下划线';
		                isValid = false;
		            } else {
		                document.getElementById('passwordError').textContent = '';
		            }
		
		            // 邮箱验证（简单验证，不检查邮箱是否真实存在）
		            const emailRegex = /^\S+@\S+\.\S+$/;
		            if (!emailRegex.test(email)) {
		                document.getElementById('emailError').textContent = '请输入有效的邮箱地址';
		                isValid = false;
		            } else {
		                document.getElementById('emailError').textContent = '';
		            }
		
		            // 电话号码验证（简单验证，仅检查格式）
		            const phoneRegex = /^\d{10,15}$/; // 假设电话号码为10到15位数字
		            if (!phoneRegex.test(phone)) {
		                document.getElementById('phoneError').textContent = '请输入有效的电话号码';
		                isValid = false;
		            } else {
		                document.getElementById('phoneError').textContent = '';
		            }
		
		            // 生日验证
		            const birthdayRegex = /^\d{4}-\d{1,2}-\d{1,2}|\d{4}\/\d{1,2}\/\d{1,2}$/; // 支持2000-1-1或2000/1/1格式
		            if (!birthdayRegex.test(birthday)) {
		                document.getElementById('birthdayError').textContent = '请输入有效的生日格式（如：2000-2000)';
					</script>		
	</body>
</html>
